<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<style>
    body {
        background: url(./images/desktop_1.jpg);
    }

    .box1 {
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    .box2 {
        color: pink;
        background-color: red;
    }
</style>

<body>
    <!-- <div><img src="./images/1.webp" alt=""></div> -->
    <div class="box1">dasfdsafa</div>
    <script>
        // let suijishu = Math.floor(Math.random() * 6) + 1
        // console.log(suijishu);
        // const img = document.querySelector('img')
        // img.src = `./images/${suijishu}.webp`
        // const srcc = ['./images/1.webp', './images/2.webp', './images/3.webp', './images/4.webp', './images/5.webp', './images/6.webp',]
        // //获取srcc数组的随机数
        // const sjshu = Math.floor(Math.random() * srcc.length)
        // //获取元素
        // const img = document.querySelector('img')
        // //改变元素中的 src 也可以使用模板字符串来改变
        // img.src = srcc[sjshu]
        // // 操作css样式
        // // 更改图片边框
        // img.style.border = '3px dashed #ccc'
        // img.style.backgroundColor = 'pink'


        // 更换背景图片
        // 封装一个n-m之间的随机数
        // function sjs(n, m) {
        //     return parseInt(Math.random() * (m - n + 1)) + n
        // }
        // // 调用随机函数 并且得到随机数
        // let shuijishu = sjs(1, 10)
        // // console.log(shuijishu);
        // // body 可以直接获取
        // // 把获得的随机数 更改到背景图片的路径里面
        // document.body.style.background = `url(./images/desktop_${shuijishu}.jpg)`

        //获取样式
        // const div = document.querySelector('div')
        // div.className = 'box2'

        //
        const div = document.querySelector('div')
        //添加这个类
        div.classList.add('box2')
        // 删除这个类
        div.classList.remove('box2')
        // 取反 有这个类就删除 没有这个类就添加
        div.classList.toggle('box2')
    </script>
</body>

</html>